<script setup lang="ts">
import { ref, onMounted } from "vue";
import router from "@/router";
import { classBasic } from "@/stores/BackData/ClassManage/classBasic";

console.log(11111111111111);

const store = classBasic();
const active = ref(0);
const nextbtn = ref("下一步");
const Editnext = () => {
  active.value++;
  console.log(111111111);

  if (store.type == "1") {
    if (active.value == 0) {
      router.push("/EStepOne");
    } else if (active.value == 1) {
      nextbtn.value = "下一步";
      router.push("/EStepTwo");
    } else if (active.value == 2) {
      // nextbtn.value = "完成";
      // router.push("/StepThree");
    } else {
      router.push("/Class");
    }
  }
};
const back = () => {
  active.value--;

  if (active.value == 0) {
    router.push("/StepOne");
  } else if (active.value == 1) {
    nextbtn.value = "下一步";
    router.push("/StepTwo");
  } else if (active.value == 2) {
    nextbtn.value = "完成";
    router.push("/StepThree");
  } else {
    router.push("/StepOne");
  }
};

onMounted(() => {
  router.push("/EStepOne");
});
</script>
<template>
  <div class="EditClass">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="基本信息" description="请填写课程的基本信息" />
      <el-step title="价格设定" description="请填写价格设定的基本信息" />
      <el-step title="详情页信息" description="请填写课程详情页的基本信息" />
    </el-steps>
    <div style="margin: auto">
      <router-view :key="$route.fullPath"></router-view>
    </div>
    <div class="btn">
      <el-button style="margin-top: 12px" @click="back" type="primary"
        >上一步</el-button
      >
      <el-button
        style="margin-top: 12px"
        @click="Editnext"
        type="primary"
        class="test"
        >{{ nextbtn }}</el-button
      >
    </div>
  </div>
</template>
<style scoped>
.EditClass {
  width: 90%;
  height: 100vh;
  margin: 5%;
}
.el-steps {
  width: 100%;
  margin-bottom: 30px;
}
.EditClass .btn {
  text-align: center;
}
</style>
